<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>05.getList</title>
		<script src="./js/JSON.js"></script>
		<script>
			window.onload = function () {
				var oBtn = document.getElementById("btn1");
				var oUl = document.getElementById("list");
				oBtn.addEventListener('click', function () {
					var oxhr = null;
					try {
						oxhr = new XMLHttpRequest();
					} catch (e) {
						oxhr = new ActiveXObject(Microsoft.XMLHTTP);
					}
					oxhr.open('GET', './php/getList.php', true);
					oxhr.send(null);
					oxhr.addEventListener('readystatechange', function () {
						if (oxhr.readyState == 4) {
							if ((oxhr.status >= 200 && oxhr.status < 300) || oxhr.status == 304) {
								var html = '';
								var listData = JSON.parse(oxhr.responseText);
								// alert(listData.length);
								for ( var i = 0, len = listData.length; i < len; i++ ) {
									html += '<li>我的姓名是：' + listData[i].name + '，我的年龄是：' + listData[i].age + '，我的性别是：' + listData[i].gender + '</li>';		
								}
								oUl.innerHTML = html;
							} else {
								alert('通讯错误：' + oxhr.status);
							}
						}
					}, false);
				}, false);
			};
		</script>
	</head>
	<body>
		<input type="button" value="获取列表内容" id="btn1" />
		<ul id="list"></ul>
	</body>
</html>
